import React, { Component } from 'react'
import { Link } from 'react-router-dom';

import Header from '../../components/Header/header';

import { imgPre } from "../../request/http";
import './cate.less';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import {
  actions,
  getCate,
  getCategoods,
  getFid,
  getN
} from '../../store/modules/cate';

class cate extends Component {
  componentDidMount() {
    this.props.cateFn.requestCate();
    this.props.cateFn.requestCategoods();
  }
  render() {
    let {
      getcate,
      n,
      getcategoods,
      name,
      cateFn: { changeN }
    } = this.props;
    // console.log(getcate);
    // console.log(getcategoods);
    return (
      <div className='cate'>
        <Header title="商品分类" back></Header>
        <div className="con">
          <div className="left">
            {getcate.map((item, index) => {
              return (
                <div
                  key={item.id}
                  className={index == n ? "active" : ""}
                  onClick={() => { changeN(index, item.id, item.catename) }}>
                  {item.catename}
                </div>
              )
            })}
          </div>


          <div className="right">

            <div className="item">
              <h3>{name}</h3>
              <div className="item-con">
                {getcategoods.map(i => {
                  return (
                    <Link to={"/detail/" + i.id + "/1"} className="item-every" key={i.id}>
                      <img src={imgPre + i.img} alt="" />
                      <div className="item-every-r">
                        <div>{i.goodsname}</div>
                        <div><span>{'￥' + i.price}</span><i>{'￥' + i.market_price}</i></div>
                        <p>{i.description}</p>
                      </div>
                    </Link>
                  )
                })}
              </div>
            </div>

          </div>
        </div >
      </div >
    )
  }
}

const mapStateToProps = state => {
  return {
    getcate: getCate(state),
    getcategoods: getCategoods(state),
    fid: getFid(state),
    n: getN(state),
  }
}

// 取方法
const mapDispatchToProps = dispatch => {
  return {
    cateFn: bindActionCreators(actions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(cate)